<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="350" style="border:1px solid #000000;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '20px Times New Roman';

        // Coordinates
        const qPos = { x: 80, y: 175 };
        const aPos = { x: 320, y: 80 };
        const bPos = { x: 320, y: 270 };

        // Function to draw text with a subscript
        function drawTextWithSubscript(text, sub, x, y) {
            ctx.font = 'italic 22px Times New Roman';
            const textWidth = ctx.measureText(text).width;
            ctx.fillText(text, x, y);
            
            ctx.font = 'italic 16px Times New Roman';
            ctx.fillText(sub, x + textWidth - 3, y + 6);
        }

        // 1. Draw point source Q
        ctx.font = 'bold 22px Times New Roman';
        ctx.fillText('Q', qPos.x - 25, qPos.y + 7);
        ctx.beginPath();
        ctx.moveTo(qPos.x, qPos.y - 8);
        ctx.lineTo(qPos.x + 12, qPos.y);
        ctx.lineTo(qPos.x, qPos.y + 8);
        ctx.stroke();

        // 2. Draw detector A
        // Vertical line
        ctx.beginPath();
        ctx.moveTo(aPos.x, aPos.y - 25);
        ctx.lineTo(aPos.x, aPos.y + 25);
        ctx.stroke();
        // Arrowhead
        ctx.beginPath();
        ctx.moveTo(aPos.x - 6, aPos.y - 20);
        ctx.lineTo(aPos.x, aPos.y - 25);
        ctx.lineTo(aPos.x + 6, aPos.y - 20);
        ctx.stroke();
        // Detector box
        ctx.fillRect(aPos.x + 10, aPos.y - 7, 30, 14);
        // Label 'A'
        ctx.font = 'bold 22px Times New Roman';
        ctx.fillText('A', aPos.x - 8, aPos.y - 35);

        // 3. Draw detector B
        // Vertical line
        ctx.beginPath();
        ctx.moveTo(bPos.x, bPos.y - 25);
        ctx.lineTo(bPos.x, bPos.y + 25);
        ctx.stroke();
        // Detector box
        ctx.fillRect(bPos.x + 10, bPos.y - 7, 30, 14);
        // Label 'B'
        ctx.font = 'bold 22px Times New Roman';
        ctx.fillText('B', bPos.x - 8, bPos.y - 35);
        
        // 4. Draw dashed lines
        ctx.beginPath();
        ctx.setLineDash([7, 5]);
        // Line from Q to A
        ctx.moveTo(qPos.x + 12, qPos.y);
        ctx.lineTo(aPos.x - 5, aPos.y);
        // Line from Q to B
        ctx.moveTo(qPos.x + 12, qPos.y);
        ctx.lineTo(bPos.x - 5, bPos.y);
        ctx.stroke();
        // Reset to solid line
        ctx.setLineDash([]);

        // 5. Add path labels
        // Label l_A
        drawTextWithSubscript('l', 'A', 180, 120);
        // Label l_B
        drawTextWithSubscript('l', 'B', 180, 240);

        // 6. Add figure caption
        ctx.font = '18px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 8.4', canvas.width / 2, 330);

    </script>
</body>
</html>